<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item label="项目名称">
      	<div></div>
      	<div style="margin-left:65px;">
    <el-input v-model="form.activityTitle">
    </el-input>
      	</div>
    	</el-row>
     </el-form-item>
      <el-form-item label="活动时间">
      	<div></div>
      	<div style="margin-left:65px;">
    <el-date-picker
      v-model="form.activityDateTime"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      	</div>
    	</el-row>
      </el-form-item>
      <el-form-item label="活动行业/类别">
      	<el-row>
      		<el-col :span="12">
      			<div>
      				<span class="fieldLabel">所属行业</span>
        <el-select v-model="form.belongIndustry" placeholder="请选择所属行业">
        	<el-option 
        	 v-for="(v,k) in belongIndustrys" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      			</div>
      		</el-col>
      		<el-col :span="12">
      			<div>
      				<span class="fieldLabel">所属类别</span>
        <el-select v-model="form.belongClassType" placeholder="请选择所属类别">
        	<el-option 
        	 v-for="(v,k) in belongClassTypes" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      			</div>
      		</el-col>
      	</el-row>
      </el-form-item>
      <el-form-item label="项目层级/组别">
      	<el-row>
      		<el-col :span="12">
      			<span class="fieldLabel">所属层级</span>
        <el-select v-model="form.belongLev" placeholder="请选择所属层级">
        	<el-option 
        	 v-for="(v,k) in belongLevs" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      		</el-col>
      		<el-col :span="12">
      			<span class="fieldLabel">所属组别</span>
        <el-select v-model="form.belongGroup" placeholder="请选择所属组别">
        	<el-option 
        	 v-for="(v,k) in belongGroups" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      		</el-col>
      	</el-row>
      </el-form-item>
      <el-form-item label="作品格式/大小">
      	<el-row>
      		<el-col :span="12">
      				<span class="fieldLabel">文件格式</span>
        <el-select v-model="form.activityAllowFileType" placeholder="请选择格式" multiple>
        	<el-option 
        	 v-for="(v,k) in allowFileTypes" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      		</el-col>
      		<el-col :span="12">
      			<div class="inlineDiv">
      				<span class="fieldLabel">文件大小</span>
      				<el-input placeholder="请输入文件大小" v-model="form.activityAllowFileSize" style="width:260px;">
      					  <template slot="append">MB</template>
      				</el-input>
      			</div>
      		</el-col>
      	</el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onRefresh">刷新</el-button>
      </el-form-item>
    </el-form>
<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.activityTitle }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="活动时间" width="350">
        <template slot-scope="scope">
          <span>{{ scope.row.activityDateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行业类别" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.belongIndustry }}/{{ scope.row.belongClassType }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="层级组别" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.belongLev }}/{{ scope.row.belongGroup }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发布日期" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
   </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	belongIndustrys:[
    	{value:"基础教育",label:"基础教育",key:"基础教育"},
    	{value:"职业教育",label:"职业教育",key:"职业教育"},
    	{value:"政府部门",label:"政府部门",key:"政府部门"}
    	],
    	belongClassTypes:[
    	{value:"论文类",label:"论文类",key:"论文类"},
    	{value:"案例类",label:"案例类",key:"案例类"},
    	{value:"科技创新类",label:"科技创新类",key:"科技创新类"},
    	{value:"书法类",label:"书法类",key:"书法类"},
    	{value:"作文类",label:"作文类",key:"作文类"}
    	],
    	belongLevs:[
    	{value:"国家级",label:"基础教育",key:"基础教育"},
    	{value:"省部级",label:"省部级",key:"省部级"},
    	{value:"地市级",label:"地市级",key:"地市级"},
    	{value:"区县级",label:"区县级",key:"区县级"},
    	{value:"院校级",label:"院校级",key:"院校级"}
    	],
    	belongGroups:[
    	{value:"普通组",label:"普通组",key:"普通组"},
    	{value:"中等组",label:"中等组",key:"中等组"},
    	{value:"高级组",label:"高级组",key:"高级组"}
    	],
    	allowFileTypes:[
    	{value:"Word",label:"普通组",key:"普通组"},
    	{value:"普通组",label:"普通组",key:"普通组"},
    	{value:"普通组",label:"普通组",key:"普通组"},
    	],
      form: {
      	activityTitle:'',
        activityDateTime: '',
        beloneIndustry:'',
        belongClassType:'',
        belongLev:'',
        belongGroup:'',
        activityAllowFileType:'',
        activityAllowFileSize:'',
        activityInfo:{}
      },
      listLoading: false,
      list:[
      {activityTitle:"这是一份测试活动1",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动2",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动3",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动4",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动5",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动6",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动7",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动8",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动9",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      {activityTitle:"这是一份测试活动10",activityDateTime:"2024-11-01 08:00:00 - 2024-11-07 08:00:00",
      beloneIndustry:"",belongClassType:"",
      belongLev:"",belongGroup:"",
      created_at:"2024-10-31 12:00:00",
      },
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onRefresh() {
      this.$message({
        message: 'refresh!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.inlineDiv{
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
}
.fieldLabel{
	margin-right:10px;
}
</style>

